<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS_1.3.css">
    <title>CSS常用属性</title>
</head>
<body>
    <p>请描述常用CSS样式，包括字体样式、文本样式、颜色样式、背景样式、列表样式、盒子模型等内容相关属性及其作用，并分别举例说明。</p>
    <div class="ZW">
        <h1>字体</h1>
        <p class="box1 f1">字体种类</p>
        <P class="box1 f2">斜体&加粗</P>
        <br>
        <h1>文本</h1>
        <p class="box1 f3">文本对齐</p>
        <p class="box1 f4">行高</p>
        <p class="box1 f5">文本装饰线</p>
        <p class="box1 f6">文本缩进<br>
                          12345<br>
                          helloworld<br>
                          &emsp;&emsp;首行缩进两字符
        </p>
        <p class="box1 f7">字符间距 单词间距 abc hello world</p>
        <p class="box1 f8">字母转换、阴影</p>
    </div>
<br>
    <div class="CL">
        <p class="box2 f9">rgb</p>
        <p class="box2 f10">rgba</p>
        <p class="box2 f11">#十六进制</p>
        <p class="box2 f12">颜色名称，例如：orange</p>
        <p class="box2 f13">hsl色彩</p>
        <p class="box2 f14">hsla色彩</p>
    </div>

<br>

    <div class="BG">
        <p class="box3 f15">背景颜色</p>
        <p class="box3 f16">背景图片</p>
        <p class="box3 f17">背景重复</p>
        <p class="box3 f18">背景位置</p>
    </div>

<br>

    <div class="ML">

        <ul class="box4 f19">
            <section>无序列表</section>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>

        <ol class="box4 f20">
            <section>有序列表</section>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表</li>
            <li>列表</li>
        </ol>
    </div>
    
<br>

    <div class="BOX">
        <div class="box5">
            <div class="box6">
                <div class="box7">
                   <span class="box7 s1">1</span>
                   <span class="box7 s2">2</span>
                   <span class="box7 s3">3</span>
                   <span class="box7 s4">4</span> 
                </div>
            </div>
        </div>
    </div>

<br>
    <div class="LAY1">
        <div id ="container">
            <div id="header"><h1>页眉区域</h1></div>
            <div id="wrapper">
                <div id="content"><p><strong>1.主体内容区域</strong></p></div>
            </div>
            <div id="navigation"><p><strong>2.导航栏</strong></p></div>
            <div id="extra"><p><strong>3.其他栏目</strong></p></div>
            <div id="footer"><p>页脚区域</p></div>
        </div>
    </div>

<br>
    <div class="LAY2">
        <p>
            <span><strong>虞美人</strong>
                        南唐/宋 李煜
            </span>
            <br>春花秋月何时了，
            <br>往事知多少。
            <br>小楼昨夜又东风，
            <br>故国不堪回首月明中。
            <br>雕栏玉砌应犹在，
            <br>只是朱颜改。
            <br>问君能有几多愁，
            <br>恰似一江春水向东流。
        </p>
    </div>

<br>
    <div class="LAY3">
            <div id="header">标题栏</div>
            <div id="contain">
                <div id="sub_contain1">左栏</div>
                <div id="sub_contain2">右栏</div>
            </div>
        <div id="footer">页脚</div>
    
    </div>

</body>
</html>